<template>
    <div class="wrap">
        <img :src="product.img_url" alt="">
        <p class="title">{{product.short_title}}</p>
        <p>{{product.title}}</p>
        <div class="price-buy">
            <b>&yen;{{(product.price||0).toFixed(2)}}</b>
            <van-button type="primary">立即购买</van-button>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        product:{
            defaultValue:{},
            type:Object
        }
    }
}
</script>
<style lang="less" scoped>
.wrap{
    background: white;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    img{
        width: 100%;
    }
    p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #888;
        font-size: 12px;
        padding-top: 10px;
        &.title{
            font-size: 15px;
            font-weight: 400;
            color: @primary-color;
        }
    }
    .price-buy{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        button{
            height: 32px;
            line-height: 30px;
        }
    }
}
</style>